<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
</head>
<body>
	<div class="map">
		
	</div>
	
	<script src="js/d3_3.5.7.js"></script>
	<script>
		var width = 800;
		var height = 1000
		var svg = d3.select(".map").append('svg').attr({"width":width,"height":height});
		
		//定义地图的投影
		var projection = d3.geo.mercator()
							.center([107,31])
							.scale(600)
							.translate([width / 2,height / 2]);
		
		//定义地理路径生成器
		var path = d3.geo.path()
					.projection(projection); //设定投影
		
		var color = d3.scale.category20();
		
		//请求china.json
		d3.json("./json/china.json",function(error,root) {
			if(error) {
				return console.error(error);
			}
			console.log(root);
			var groups = svg.append("g");
			
			groups.selectAll("path")
					.data(root.features)
					.enter()
					.append("path")
					.attr("class","provice")
					.style("fill",function(d,i) {
						return color(i)
					})
					.attr("d",path);//使用路径生成器
			
			var groups = svg.append("g");
		
			groups.selectAll("path")
					.data(root.features)
					.enter()
					.append("path")
		})
		
		
		
	</script>
</body>
</html>